<template>
  <div id="login">
    <div class="center-box">
      <div class="banner-box">
        <el-carousel height="60vh" trigger="click">
          <el-carousel-item>
            <img style="height:100%;width:100%;" src="../../assets/img/ban1.png" alt="" />
          </el-carousel-item>
          <el-carousel-item>
            <img style="height:100%;width:100%;" src="../../assets/img/2.png" alt="" />
          </el-carousel-item>
          <el-carousel-item>
            <img style="height:100%;width:100%;" src="../../assets/img/3.png" alt="" />
          </el-carousel-item>
          <el-carousel-item>
            <img style="height:100%;width:100%;" src="../../assets/img/4.png" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="login-box">
        <div class="title">大学生实习平台</div>
        <div class="child-box" v-if="!isRegister">
          <el-input placeholder="your phone" v-model="phone"> </el-input>
          <el-input
            placeholder="your password"
            show-password
            v-model="password"
          >
          </el-input>

          <el-button @click="isRegister = !isRegister" type="primary"
            >register</el-button
          >
          <el-button type="primary" @click="LoginByPhone">login</el-button>
        </div>
        <div class="child-box" v-if="isRegister">
          <el-input placeholder="your username" v-model="Rusername"> </el-input>
          <el-input placeholder="your phone" v-model="Rphone"> </el-input>
          <el-input
            placeholder="your password"
            show-password
            v-model="Rpassword"
          >
          </el-input>
          <el-select
          style="width:100%;margin-top:10px;"
          v-model="role"
        >
          <el-option
            label="学生"
            value="0"
          >
          </el-option>
          <el-option
            label="企业"
            value="1"
          >
          </el-option>
        </el-select>
          <el-button @click="isRegister = !isRegister" type="primary"
            >return</el-button
          >
          <el-button type="primary" @click="Register">comfirm</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { cookieData ,localData} from "@/util/local";
import { UserLogin , UserRegister } from "@/api/user"
export default {
  name: "login",
  data() {
    return {
      Rusername: "",
      phone:"",
      password: "",
      Rusername: "",
      Rphone:"",
      Rpassword: "",
      role:"0",
      isRegister: false,
    };
  },
  created() {
    console.log(window.history);
  },
  mounted() {
    this.$nextTick(() => {
      console.log(window.location);
    });
  },
  methods: {
    LoginByPhone() {
      if (!this.phone) {
        this.$message({
          showClose: true,
          message: "请填写登录手机",
          type: "warning",
        });
        return;
      }
      if (!this.password) {
        this.$message({
          showClose: true,
          message: "请填写登录密码",
          type: "warning",
        });
        return;
      }
      const parems = {
        phone: this.phone,
        password: this.password,
      };
      UserLogin(parems)
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "登录成功",
              type: "success",
            });
            cookieData("set", "token", res.data.token, 1); // 将token 存在cookie,  1天后过期
            localData("set", 'userinfo' , res.data.user)
            this.$router.push({path:"/"})
          }
        })
        .catch((err) => {
          this.$message({
              message: err.data,
              type: "warning",
            });
        });
    },
    Register(){
      if (!this.Rusername) {
        this.$message({
          showClose: true,
          message: "请填写登录手机",
          type: "warning",
        });
        return;
      }
      if (!this.Rphone) {
        this.$message({
          showClose: true,
          message: "请填写登录手机",
          type: "warning",
        });
        return;
      }
      if (!this.Rpassword) {
        this.$message({
          showClose: true,
          message: "请填写登录密码",
          type: "warning",
        });
        return;
      }
      const parems = {
        name: this.Rusername,
        password: this.Rpassword,
        phone:this.Rphone,
        role:parseInt(this.role),
        status:0
      };
      UserRegister(parems)
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "账号注册成功",
              type: "success",
            });
            this.isRegister = false
          }
        })
        .catch((err) => {
          console.log(err)
          this.$message({
              message: err.data.msg,
              type: "warning",
            });
        });
    }
  },
};
</script>

<style>
#login {
  /* background-color: #C0C4CC; */
  height: 100vh;
  width: 100vw;
  /* text-align: center; */
  background-image: url("../../assets/img/bac.png");
  background-size: 100%;
}
#login .center-box {
  width: 100vw;
  height: 60vh;
  /* background-color: #c0c4cc; */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: space-between;
}
#login .center-box .banner-box {
  height: 100%;
  width: 70%;
  /* background: #94faf5; */
}
#login .center-box .login-box {
  height: 100%;
  width: 30%;
  background: #004223;
  opacity: 0.85;
}

.login-box .title {
  font-size: 24px;
  text-align: center;
  color: #ffffff;
  padding: 20px 0;
}
.login-box .child-box {
  width: 80%;
  margin: auto;
}
.login-box .child-box > .el-input {
  margin: 14px 0;
}
.login-box .child-box > .el-button {
  margin: 14px 0;
  width: 48%;
}
</style>
